import React, { useEffect, useRef } from 'react';
import './index.less';
const App = () => {
  const canvasRef = useRef();
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    // console.log(ctx); // CanvasRenderingContext2D ...
    /* rect 第一个参数是相对于上下文的x轴坐标 第二个参数是相对于上下文的y轴坐标 第三,四个参数分别是长和高*/
    // ctx.rect(10, 10, 200, 100);
    // /*
    //  strokeStyle 和 fillStyle 属性的设置是一次设置永久有效的，想要改变必须重新设置其他值来覆盖原有的值。
    // */
    // ctx.strokeStyle = '#f00'; // 描边样式设置为红色
    // /* 描边绘制 */
    // ctx.stroke();
    // ctx.beginPath(); // 开启新路径
    // /* 设置描边颜色 */
    // ctx.fillStyle = '#ccc';
    // ctx.rect(10, 120, 200, 100);
    // /* 填充图形 */
    // ctx.fill();
    /* 画一条(50,50)至(400,50)的直线 */
    /* 先将画笔移至点(50,50) */
    // ctx.moveTo(50, 50);
    /* 连线另一个点 */
    // ctx.lineTo(400, 50);
    // ctx.stroke();
    // 连续的直线只需要设置一个起始点
    // ctx.lineWidth = 10; //设置线段的粗细
    /* 端部圆滑处理 */
    // ctx.lineCap = 'round';
    /* 设置连接处的样式处理 */
    // ctx.lineJoin = 'round';
    // ctx.moveTo(50, 100);
    // ctx.lineTo(50, 400);
    // ctx.lineTo(400, 400);
    // ctx.stroke();
    // miterLimit为定值，角度越大
    // ctx.beginPath();
    // ctx.lineWidth = 5;
    // ctx.lineJoin = 'miter';
    // ctx.miterLimit = 10;
    // ctx.moveTo(0, 100);
    // for (var i = 0; i < 50; i++) {
    //   var dy = i % 2 == 0 ? 200 : 100;
    //   ctx.lineTo(Math.pow(i, 1.5) * 2, dy);
    // }
    // ctx.stroke();
    // ctx.closePath();
    /* 绘制一个圆 */
    // ctx.strokeStyle = '#f00'; // 描边样式设置为红色
    // ctx.fillStyle = '#00f'; // 填充样式设置为蓝色
    // ctx.globalAlpha = 0.5; // 设置透明度值
    // (ctx.lineWidth = 5),
    //   // 顺时针绘制一段90度的圆弧
    //   ctx.arc(100, 100, 50, 0, (360 * Math.PI) / 180);
    // ctx.stroke();

    // // 逆时针绘制一段90度的圆弧
    // ctx.beginPath();
    // ctx.arc(300, 100, 50, 0, (360 * Math.PI) / 180, true);
    // ctx.fill();
    /* 绘制椭圆 */
    // ctx.ellipse(100, 150, 50, 100, 0, 0, 2 * Math.PI);
    // ctx.stroke();
    /* 二次贝塞尔曲线 */
    // ctx.beginPath();
    // ctx.moveTo(100, 250);
    // // ctx.quadraticCurveTo(250, 100, 400, 250);
    // /* 三次贝塞尔曲线 两个控制点 */
    // ctx.bezierCurveTo(349, 117, 240, 444, 400, 250);
    // ctx.stroke();
    /* 根据img绘制 */
    // if (ctx) {
    //   let img = new Image();
    //   img.src =
    //     'https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics4.baidu.com%2Ffeed%2F242dd42a2834349b7b73405a035ae2c237d3be31.jpeg%40f_auto%3Ftoken%3D0443bc1a9823a686634b2eecba01dfff&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1698166800&t=06b472ecada5bb11e1191b805c9f5250';
    //   img.onload = () => {
    //     let ptrn = ctx.createPattern(img, 'repeat');
    //     ctx.fillStyle = ptrn;
    //     ctx.fillRect(0, 0, 1000, 1000);
    //   };
    // }
    /* 绘制文字 */
    ctx.font = '30px Arial';
    ctx.strokeText('携手创作，共同成长，你好，掘金。', 10, 200, 300);
  }, []);
  return (
    <div className="centerBox">
      <canvas width={500} height={500} ref={canvasRef} className="Mcanvas">
        当前浏览器不支持canvas元素，请升级或更换浏览器！
      </canvas>
    </div>
  );
};

export default App;
